.side-bar-container{
	position: fixed;
	top: 0; left: 0;
	width: auto;
	bottom:0;
	z-index: 9999999
}
.display-sm{
	display: none;
}
.display-xl{
	display: block;
}
.router-view-big{
	padding-left: 15rem;
	transition: all 0.5s;
}
.router-view-sm{
	padding-left: 4.375rem;
	transition: all 0.5s;
}
.router-container{
	padding-top: 3.75rem;
}
.side-bar-controller{
	display: none;
}
.top-bar-container{
	position: fixed; top: 0; left: 0; right: 0; z-index: 999999; width: 100%;
}
.unis-{
	&aside {
		height: 100%;
		box-shadow: 0px 0.5rem 4.571428571428571rem rgba(44, 60, 89, 0.17);
		z-index: 99999;
		.aside-unfold {
			@include transitionAll5;
			position: relative;
			height: 100%;
			display: flex;
			.aside-controller {
				position: absolute;
				right: -0.8rem;
				cursor: pointer;
				top: 4.3rem;
				box-shadow: 0px 0px 0.21428571428571427rem rgba(44, 60, 89, 0.2);
				background: $light;
				border-radius: 0.1rem;
				width: 1.45rem;
				height: 1.45rem;
				display: flex;
				align-items: center;
				justify-content: center;
				.right {
					position: relative;
				}
				.right-arrow1,.right-arrow2 {
					width:0;
					height:0;
					display:block;
					position:absolute;
					left:-0.5714285714285714rem;
					top:-0.42857142857142855rem;
					border-top:6px transparent dashed;
					border-left:6px transparent dashed;
					border-bottom:6px transparent dashed;
					border-right:6px $error solid;
					overflow:hidden;
				}
				.right-arrow1 {
					left: -0.7142857142857143rem;
					border-right:6px $inputPlaceholderColor solid;
				}
				.right-arrow2 {
					border-right:6px $light solid;
				}
				&:hover{
					background: $themeHover;
					.right-arrow1 {
						border-right:6px $light solid;
					}
					.right-arrow2 {
						border-right:6px $themeHover solid;
					}
				}
				&:active{
					background: $themePressed;
					.right-arrow1 {
						border-right:6px $light solid;
					}
					.right-arrow2 {
						border-right:6px $themePressed solid;
					}
				}
			}
			.parent-level-big {
				background: $body;
				padding: 1.65rem 0.6rem;
				width: 15rem;
				min-width: 15rem;
				@include transitionAll5;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: nowrap;
				flex-direction: column;
				.log-big {
					width: 6.35rem;
					@include transitionAll5;
					height: 2.6rem;
					display: block;
					margin-bottom: 1.75rem;
					img {
						width: 6.35rem;
						height: auto;
					}
				}
				.log-nano {
					width: 1.55rem;
					height: 2.6rem;
					margin-bottom: 1.75rem;
					display: none;
					img {
						width: 1.55rem;
						height: auto;
					}
				}
				& > .active {
					background: rgba(200, 216, 228, 0.7);
					@include transitionAll5;
				}
				.item_connect {
					margin: 1.05rem 0;
					width: 100%;
					box-sizing: border-box;
					border-radius: 0.1rem;
					display: flex;
					justify-content: center;
					align-items: center;
					cursor: pointer;
					position: relative;
					@include transitionAll5;
					&:hover {
						background: rgba(200, 216, 228, 0.7);
						@include transitionAll5;
					}
					.item_box {
						width: 100%;
						@include transitionAll5;
						display: flex;
						align-items: center;
						justify-content: flex-start !important;
						font-size: 1rem;
						min-height: 2.25rem;;
						//@include noboder36;
						.img-box {
							margin-left: 1.4rem;
							width: 1.4rem;
							display: flex;
							align-items: center;
							text-align: center;
							img {
								height: 1rem;
								width: auto;
							}
						}
						.pro-ab {
							width: auto;
							overflow: hidden;
							@include transitionAll5;
							.text-box {
								display: flex;
								justify-content: flex-start;
								align-items: center;
								margin-left: 1rem;
								img {
									height: 0.65rem;
									width: auto;
									display: none;
								}
								.text {
									white-space: nowrap;
									color: $light;
									font-style: normal;
									padding-right:0.35714285714285715rem ;
									font-weight: bold;
									font-size: 1rem;

								}

							}
						}

					}

				}
			}
			.parent-level-small {
				width: 4.375rem;
				min-width: 4.375rem;
				padding: 1.65rem 0.6rem;
				@include transitionAll5;
				.log-big {
					display: none;
				}
				.log-nano {
					display: block;
				}

				.item_connect {
					margin: 1.05rem 0;
					&:hover {
						.pro-ab {
							display: block !important;
						}
					}
					.item_box {
						width: 100% !important;
						justify-content: center !important;
						.img-box {
							margin-left: auto;
							width: 1.4rem;
							display: contents !important;
							text-align: center;
							background: red;
							img {
								height: 1rem;
								width: auto;
							}
						}
						.pro-ab {
							width: 0px;
							overflow: hidden;
							@include transitionAll5;
							display: none;
							.text-box {
								position: absolute;
								left: 82%;
								top: -0.8571428571428571rem;
								@include noboder42;
								min-width: 8rem;
								margin-left: 1.3rem;
								white-space: nowrap;
								color: $light;
								display: flex;
								justify-content: left;
								align-items: center;
								img {
									display: block;
								}
								.text {
									min-width: 7rem;
									display: flex;
									justify-content: center;
									padding-left: 0.4714285714285714rem;
									padding-right: 0.4714285714285714rem;
									align-items: center;
									@include noboder42;
									background: $body;
									border-radius: 2px;
								}
							}
						}
					}
				}
			}
			.parent-details {
				width: 0px;
				min-width: 0px;
				flex: inherit;
				overflow: hidden;
				height: 100%;
				background: $light;
				.business-box {
					min-width: 8rem;
					height: 100%;
					padding: 1.95rem 0.4rem;
					.business {
						font-weight: bold;
						line-height: 1.2rem;
						font-size: 1.125rem;
						color: $body;
						width: 100%;
						text-align: left;
						padding: 0.4rem 1rem 0.4rem 0.5rem;
						margin-right: 0.1rem;
						margin-left: 0.1rem;
						margin-bottom: 3.25rem;
					}
					.business-item {
						cursor: pointer;
						color: $body;
						width: 95%;
						font-style: normal;
						font-weight: bold;
						padding: 0.4rem 1rem 0.4rem 0.5rem;
						margin: 0.35rem 0.1rem;
						box-sizing: border-box;
						background: $light;
						border-radius: 0.1rem;
						white-space: nowrap;
						@include transitionAll5;
						&:hover {
							background: rgba(200, 216, 228, 0.7);
							@include transitionAll5;
						}
					}
					.active {
						background: rgba(200, 216, 228, 0.7);
						@include transitionAll5;
					}
				}
			}
			.fold-details {
				flex: 1;
				min-width: 10.625rem;
				@include transitionAll5;
			}

		}
		.aside-fold {
			@include transitionAll5;
			.aside-controller {
				.right {
					@include arrowTransition(.3s, -180deg);
				}
			}
			.fold-details {
				width: 0px;
				min-width: 0;
			}
		}
	}
	&a{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		text-decoration: none;
		color: inherit;
		cursor: pointer;
		&:hover{
			color: inherit;
			text-decoration: none;

		}
	}


}


@media only screen and (max-width: 768px), only screen and (max-device-width:768px) {
	html,body{
		font-size: 14px;
	}
	.side-bar-container{
		left: -20rem;
		transition: all 0.5s;
	}
	.show-side-bar{
		left: -0rem !important;
		transition: all 0.5s;
	}
	.router-view-big{
		padding-left: 0rem;
		transition: all 0.5s;
	}
	.router-view-sm{
		padding-left: 0rem;
		transition: all 0.5s;
	}
	.unis-topBar{
		background: #444545;
	}
	.side-bar-controller{
		display: block;
	}
	.aside-controller{
		top:1.3rem!important;
	}
	.display-sm{
		display: block !important;

	}
	.display-xl{
		display: none !important;
	}
	.parent-level-big {
		padding: 1rem 0.2rem !important;
		width: 10.625rem !important;
		min-width: 10.625rem!important;

	}
	.parent-level-small {
		width: 3rem!important;
		min-width: 3rem!important;
		padding: 1rem 0.2rem!important;
		.item_connect {
			&:hover {
				.item_box{
					.text-box{
						display: none !important;
					}
				}
			}
		}

	}
	.parent-details {
		.business-box {
			min-width: 7rem !important;
			height: 100%;
			padding: 1rem 0.4rem !important
		}
	}
	.aside-unfold{
		.fold-details {
			min-width: 8.2rem!important
		}
	}
	.aside-fold {
		.fold-details {
			width: 0px!important;
			min-width: 0!important;
		}
	}
}